<template>
  <div class="container white_bgc">
    <div class="cls_lie limitActive">
      <Headerchunk :headinfo="headinfo"></Headerchunk>
      <ul class="cls_list">
        <li v-for="(item,index) in lists" :key="index">
          <router-link :to="{name:'index'}" class="con">
            <img :src="item.src" alt="" />
            <div class="topic_con_txt"><span>{{item.name}}</span></div>
          </router-link>
          <div class="time_dao" :id="'time_dao_ing' + (index+1)">
            <p>
              <span>距开抢<i>5</i>天</span>
              <span class="hour">24</span>
              <span class="minte">52</span>
              <span class="second">23</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Headerchunk from '@/components/common/Headerchunk'
export default{
  data(){
    return{
      headinfo:{
        before:'查看更多',
        after:'限时抢购',
        imgurl:'static/img/icon_time.png'
      },
      lists:[
        {
          src:'static/img/favorable_1.jpg',
          name:'测试活动名称一'
        },
        {
          src:'static/img/favorable_2.jpg',
          name:'测试活动名称二'
        }
      ]
    }
  },
  components:{
    Headerchunk
  }
}
</script>
<style lang="scss">
.cls_lie{
  padding:0 0 10px 0;
  
  .cls_list{
    overflow: hidden;
    display: flex;
    justify-content: flex-start;

    li{
      width:50%;
      padding:0 5px;
      box-sizing: border-box;
      
      .topic_con_txt{
        width:100%;
        height: 2.3rem;
        font-size: 1.2rem;
        line-height: 2.3rem;
        text-align: center;
        color: #fff;
        background-color: rgba(0,0,0,.6);
        position: absolute;
        left:0;
        bottom:0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .con{
        display: block;
        overflow: hidden;
        border:1px solid #eee;
        position: relative;

        .topic_con_txt{
          display: inline-block;
          width: 100%;
          text-align: center;
        }
        img{
          width: 100%
        }
      }
      .time_dao{
        margin-top: 5px;
        text-align: center;
      }
    }
  }
}
</style>